<template>
  <div>

    <a-card style="height: 95vh">
      <a-row class="yy-Row">
        <!-- 查询条件 -->
        <a-form-model
            layout="inline"
            :model="queryForm"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
        >
          <a-row>
            <a-col :span="6">
              <a-form-model-item :label="$t('menuItem.lotId')" >
                <a-input
                    id="inputs"
                    v-model="inputs"
                    allowClear
                    :placeholder="$t('menuItem.inputLotId')"
                    @keyup="getInputInfo"
                    @keyup.enter.native="clickBarCode()"
                    @paste="handlePaste"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-row>
      <a-row>
        <a-col >
          <a-table
              :columns="columns"
              :dataSource="dataSource"
              :loading="loadTable"
              bordered
              :rowKey="(record,index)=>{return index}"
              :scroll="{y:windowHeight - 250 ,x:'100%'}"
              :pagination="dataPagination"
              @change="tableChange"
              size="small"
          >
            <template slot="lotId" slot-scope="text, record">
<!--              <a @click="clickCell(record)">{{record.lotId}}</a>-->
              <a>{{record.lotId}}</a>
            </template>

          </a-table>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
import {mapState, mapMutations} from "vuex";
import SendMsg from "../../api/SendMsg";
import {message} from "ant-design-vue";
import i18n from "@/i18n";

export default {
  name: 'CodeScanner',
  data() {
    return {
      columns: [
        {
          title: this.$t('menuItem.NO'),
          dataIndex: 'key',
          key: 'key',
          align: 'center',
          width: 70,
        },
        {
          title: this.$t('menuItem.LotId'),
          dataIndex: 'lotId',
          key: 'lotId',
          align: 'center',
          width: 120,
          // scopedSlots: {customRender: 'lotId'},
        },
        {
          title: this.$t('menuItem.Quantity'),
          dataIndex: 'quantity',
          key: 'quantity',
          align: 'center',
          width: 100,
        },
        {
          title: this.$t('menuItem.CarrierId'),
          dataIndex: 'crrId',
          key: 'crrId',
          align: 'center',
          width: 100,
        },
        {
          title: this.$t('menuItem.PRI_INT'),
          dataIndex: 'priInt',
          key: 'priInt',
          align: 'center',
          width: 90,
        },
        {
          title: this.$t('menuItem.StepStatus'),
          dataIndex: 'stepStatus',
          key: 'stepStatus',
          width: 150,
          align: 'center',
        },
        {
          title: this.$t('menuItem.ProductId'),
          dataIndex: 'productName',
          key: 'productName',
          width: 130,
          align: 'center',
        },
        {
          title: this.$t('menuItem.EqpId'),
          dataIndex: 'eqptId',
          key: 'eqptId',
          align: 'center',
          width: 100,
        },
        {
          title: this.$t('menuItem.Type'),
          dataIndex: 'type',
          key: 'type',
          align: 'center',
          width: 80,
        },

      ],
      columns2: [
        {
          title: this.$t('menuItem.WaferId'),
          dataIndex: "waferId",
          key: "waferId",
          align: 'center',
          width: 120,
        },
        {
          title: this.$t('menuItem.Result'),
          dataIndex: 'ymsResult',
          key: 'ymsResult',
          align: 'center',
          width: 70,
          scopedSlots: {customRender: 'ymsResult'},
        },
      ],
      dataSource: [],
      loadTable: false,
      inputs: "", //条码扫码保存的数据
      timeArr : [0,0],//扫条码记录间隔时长用来判断是不是扫码枪
      isScanningGun:false,//判断是否扫码枪
      labelCol: {span: 7},
      wrapperCol: {span: 16},
      windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
    }
  },
  computed: {
    ...mapState('JsCodeScanner', ['queryForm','typeList','dataPagination']),
  },
  methods: {
    // ...mapMutations('JsCodeScanner', [ 'cleanAll']),
    tableChange(data) {
      let val = {
        ...this.dataPagination,
        current: data.current,
        pageSize: data.pageSize,
      }
      this.setDataPagination(val)
      this.queryLot();
    },
    queryClickFunc() {
      let val = {
        ...this.dataPagination,
        current: 1,
      }
      this.setDataPagination(val)
      this.queryLot();
    },

    /**
     * 只能扫码枪输入
     */
    getInputInfo(){
      // if(this.inputs.length%2 != 0 ){
      //   //求余数不为0是奇数
      //   this.timeArr[0] = new Date().getTime();
      // }else{
      //   this.timeArr[1] = new Date().getTime();
      // }
      // //当输入第二位时判断两次输入的间隔，判断是否为手动输入，间隔过长就是手动
      // if(this.inputs.length > 1 && Math.abs(this.timeArr[1] - this.timeArr[0])<60){
      //   this.isScanningGun=true
      // }else {
      //   this.isScanningGun=false
      //   this.inputs = '';
      // }
      // console.log("this.isScanningGun:",this.isScanningGun)
    },
    clickBarCode() {
      this.isScanningGun=false
      let inTrx = {
        trxId: "codeScanner",
        actionFlg: "C",
        lotId: this.inputs
      };
      SendMsg.sendPostTrx(inTrx).then((res) => {
        let outTrx = res.data;
        if ('0000000' === outTrx.rtnCode) {
          message.success(i18n.t('success'))
          this.queryLot()
          this.inputs = ''
        }
      });
    },
    queryLot(){
      let inTrx = {
        trxId: "codeScanner",
        actionFlg: "Q",
        stepStatus: ['WaitForJobIn','WaitForJobOut']
      };
      this.loadTable = true
      this.dataSource = []
      SendMsg.sendPostTrx(inTrx).then((res) => {
        let outTrx = res.data;
        if ('0000000' === outTrx.rtnCode) {
          if(outTrx.codeScannerOAList){
            this.dataSource = outTrx.codeScannerOAList.map((item, index) => {
              item.key = (index + 1);
              return item;
            });
          }
        }
      }).finally(() => {
        this.loadTable = false
      });
    },

    handlePaste(event) {
      // event.preventDefault(); // 阻止粘贴操作
      // 或者可以执行其他的处理逻辑
    }

  },
  mounted() {
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        this.windowHeight = window.fullHeight;
      })();
    };
    this.queryLot();
  },
}
</script>

<style scoped>
.yy-Row {
  margin-bottom: 1rem;
}
</style>